<template>
  <!-- 管理员 -->
  <div>
    <!-- 添加搜索 -->
    <div>
      <el-input v-model.trim="input.name" placeholder="请输入管理员名称" style="width: 20%; margin-right: 15px; margin-bottom: 15px" />
      <el-button type="primary" @click="sous(input.name)">
        <span class="iconfont icon-icon-sousuo" style="margin-right: 10px"></span>查找
      </el-button>

      <!-- 添加对话框 -->
      <el-button type="text" @click="dialogVisible = true">
        <el-button type="primary" @click="add()">
          <span class="iconfont icon-icon-B-tianjiabiji" style="margin-right: 10px"></span>添加
        </el-button>
      </el-button>
    </div>

    <!-- 表格 -->
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column label="管理员ID" prop="id" align="center" />
      <el-table-column label="管理员名称" prop="username" align="center" />
      <el-table-column label="真实姓名" prop="realname" align="center" />
      <el-table-column label="电话" prop="phone" align="center" />
      <el-table-column label="管理员角色" prop="roleIds" width="180" align="center">
        <template #default="scope">
          <span v-for="(item , index) in scope.row.roleIds" :key="index">
            <span v-for="(items , index) in tableDatas" :key="index">
              <el-tag v-if="item==items.value">{{items.label}}</el-tag>
            </span>
          </span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template #default="scope">
          <!-- 对话框 -->
          <el-button type="text" @click="dialogVisible = true">
            <!-- 修改按钮 -->
            <el-button size="small" type="primary" @click="amendnew(scope.$index, scope.row)">修改</el-button>l
          </el-button>
          <!-- 删除 -->
          <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 弹窗 -->
    <el-dialog v-model="dialogVisible" :title="title" width="600px" :before-close="handleClose">
      <!-- 内容 -->
      <el-form :inline="true" :model="addr" class="demo-ruleForm" status-icon label-width="120px">
        <el-form-item label="用户名">
          <el-input v-model.trim="addr.username" placeholder="用户名" :disabled="title=='创建'? false:true " />
        </el-form-item>
        <el-form-item label="密码" prop="pass">
          <el-input v-model="addr.password" type="password" autocomplete="off" placeholder="密码" />
        </el-form-item>
        <el-form-item label="手机号码">
          <el-input v-model.trim="addr.phone" placeholder="手机号码" />
        </el-form-item>
        <el-form-item label="真实姓名">
          <el-input v-model.trim="addr.realname" placeholder="真实姓名" />
        </el-form-item>
        <el-form-item label="角色">
          <el-select v-model="addr.roleIds" placeholder="请选中所属角色" multiple>
            <el-option v-for="(item , index) in tableDatas" :key="index" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button type="primary" @click="title=='创建'? addnew() : amend()">{{title=='创建'? "新增" : "编辑"}}</el-button>
        <el-button @click="title=='创建'? addForm() : amendForm()">重置</el-button>
      </template>
    </el-dialog>
    <!-- 分页 -->
    <paging-vue v-bind="index" @limits="limitv" @pages="pagev"></paging-vue>
  </div>
</template>

<script>
import { post } from '@/utils/http.js' // 引入封装工具

export default {
  data() {
    return {
      index: {
        page: 1, // 分页
        limit: 10, // 每页显示条数
        total: 10 // 总数
      },
      // 输入框
      input: {
        name: '' // 名称
      },
      tableData: [], // 管理数据
      tableDatas: [], // 角色数据

      dialogVisible: false, // 弹出框显示/隐藏
      title: '创建',
      // 弹窗数据
      addr: {
        username: '', // 用户名
        password: '', // 密码
        phone: '', // 手机号码
        realname: '', // 真实姓名
        roleIds: [] // 角色
      },
      // 清空弹窗数据
      adds: {
        username: '', // 用户名
        password: '', // 密码
        phone: '', // 手机号码
        realname: '', // 真实姓名
        roleIds: [] // 角色
      }
    }
  },

  created() {
    this.record() // 调用管理者数据接口
    this.records() // 调用角色枚举数据接口
  },

  methods: {
    // 管理者数据
    record() {
      const data = {
        _gp: 'admin', // 请求参数
        _mt: 'list', // 请求参数
        username: this.input.name, // 查找数据
        page: this.index.page,
        limit: this.index.limit
      }
      post(data).then((res) => {
        if (res.data.errno == 200) {
          this.tableData = res.data.data.items // 数据
          this.index.total = res.data.data.total // 分页总数
          if (this.tableData == '') {
            ElMessage.error('管理员名称不存在！')
          }
        } else {
          ElMessage.error(res.data.errmsg)
        }
      })
    },

    // 角色枚举
    records() {
      const data = {
        _gp: 'admin.role', // 请求参数
        _mt: 'options' // 请求参数
      }
      post(data).then((res) => {
        const { data, errno, errmsg } = res.data
        if (errno == 200) {
          this.tableDatas = data
        } else {
          ElMessage.error(errmsg)
        }
      })
    },

    // 搜索
    sous(name) {
      if (name == '') {
        ElMessage.error('内容不能为空！')
        this.record()
      }
      this.record()
    },

    // 弹框
    handleClose(done) {
      ElMessage({
        type: 'info',
        message: '取消操作！'
      })
        ; (this.dialogVisible = false),
          this.record()
    },

    // 添加弹出框
    add() {
      this.title = '创建'
      this.dialogVisible = true
      Object.assign(this.addr, this.adds)
    },
    // 提交添加
    addnew() {
      // 输入判断
      if (!this.verify()) {
        return false
      }

      const data = {
        _gp: 'admin', // 请求参数
        _mt: 'create', // 请求参数
        adminDTO: JSON.stringify({ ...this.addr })
      }
      post(data).then((res) => {
        if (res.data.errno == 200) {
          ElMessage.success('添加成功')
          this.dialogVisible = false
          this.record()
        } else {
          ElMessage.error(res.data.errmsg)
        }
      })
    },

    // 修改弹窗
    amendnew(index, row) {
      this.title = '编辑'
      this.dialogVisible = true
      this.addr = row
    },
    // 编辑提交
    amend() {
      // 输入判断
      if (!this.verify()) {
        return false
      }

      const data = {
        _gp: 'admin', // 请求参数
        _mt: 'edit', // 请求参数
        adminDTO: JSON.stringify({ ...this.addr })
      }
      post(data).then((res) => {
        if (res.data.errno == 200) {
          ElMessage.success('修改成功')
          this.dialogVisible = false
          this.record()
        } else {
          ElMessage.error(res.data.errmsg)
        }
      })
    },

    // 删除
    handleDelete(index, row) {
      ElMessageBox.confirm('确认删除?', '提示', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          const data = {
            _gp: 'admin', // 请求参数
            _mt: 'delete', // 请求参数
            id: row.id
          }
          post(data).then((res) => {
            if (res.data.errno == 200) {
              ElMessage.success('删除成功')
              this.record()
            } else {
              ElMessage.error(res.data.errmsg)
            }
          })
        })
        .catch(() => {
          ElMessage({
            type: 'info',
            message: '取消操作！'
          })
        })
    },

    // 添加重置
    addForm() {
      Object.assign(this.addr, this.adds)
      ElMessage.success('重置成功')
    },
    // 编辑重置
    amendForm() {
      ; (this.addr.password = ''), // 密码
        (this.addr.phone = ''), // 手机号码
        (this.addr.realname = ''), // 真实姓名
        (this.addr.roleIds = []), // 角色
        ElMessage.success('重置成功')
      this.record()
    },

    // 分页
    limitv(e) {
      this.index.limit = e
      this.record()
    },
    pagev(e) {
      this.index.page = e
      this.record()
    },
    // 验证
    verify() {
      const { username, password, phone, realname, roleIds } = this.addr
      const name = /^([\u4e00-\u9fa5]{1,5})$/ // 真实姓名验证
      const phones = /^1[3-9]\d{9}$/ // 手机号正则验证
      // 用户名验证
      if (username == '') {
        ElMessage.error('用户名不能为空！')
        return false
      }

      // 密码验证
      if (password == '') {
        ElMessage.error('密码不能为空！')
        return false
      }

      // 手机号格式验证
      if (phone == '') {
        ElMessage.error('手机号不能为空！')
        return false
      }

      if (!phones.test(phone)) {
        ElMessage.error('手机号码格式错误！')
        return false
      }

      // 真实姓名验证
      if (realname == '') {
        ElMessage.error('真实姓名不能为空！')
        return false
      }

      if (!name.test(realname)) {
        ElMessage.error('真实姓名只能是中文！')
        return false
      }

      // 角色验证
      if (roleIds.length == 0) {
        ElMessage.error('角色不能为空！')
        return false
      }

      return true
    }
  }
}
</script>

<style lang="less" scoped>
// 输入框
.el-input {
  width: 350px;
}
</style>
